<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="20" type="flex">
        <el-col :span="8">
          <NewCard :isleft="true">
            <!-- 圈子logo -->
            <template slot="left">
              <div class="setLogo">
                <img :src="$store.state.user.circleLogo || DeAvatar" alt="">
                <h3>{{$store.state.user.userInfo.whereCircle}}的圈子</h3>
                <!-- 上传logo按钮 -->
                <template v-if="circleShow">
                  <el-upload
                    action="#"
                    :limit="1"
                    accept=".png,.jpg,.jpeg"
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="uploadLogo">
                    <el-button round class="setBtn">上传圈子LOGO</el-button>
                  </el-upload>
                </template>
              </div>
            </template>

            <!-- 权限是成员的话不能显示圈子 -->
            <template v-if="circleShow">
              <!-- 切换 -->
              <div class="tabOne">
                <div
                  class="tablist"
                  :class="status == 1 ? 'isActive' : ''"
                  @click="status = 1"
                  v-if="circleShow && (circleRole.includes('1'))"
                >
                  <img src="~@/assets/images/cy_icon_nor.png" class="imgnor" />
                  <img src="~@/assets/images/cy_icon_sel.png" class="imgsel" />
                  <el-button round>成员</el-button>
                </div>
                <div
                  class="tablist"
                  :class="status == 2 ? 'isActive' : ''"
                  @click="status = 2"
                  v-if="circleShow && (circleRole.includes('2'))"
                >
                  <img src="~@/assets/images/wqxf_icon_nor.png" class="imgnor" />
                  <img src="~@/assets/images/wqxf_icon_sel.png" class="imgsel" />
                  <el-button round>消费</el-button>
                </div>
                <div
                  class="tablist"
                  :class="status == 3 ? 'isActive' : ''"
                  @click="status = 3"
                  v-if="circleShow && (circleRole.includes('1'))"
                >
                  <img src="~@/assets/images/cz_icon_nor.png" class="imgnor" />
                  <img src="~@/assets/images/cz_icon_sel.png" class="imgsel" />
                  <el-button round>充值</el-button>
                </div>
                <div
                  class="tablist"
                  :class="status == 4 ? 'isActive' : ''"
                  @click="status = 4"
                  v-if="circleShow && (circleRole.includes('1'))"
                >
                  <img src="~@/assets/images/zr_iconz-nor.png" class="imgnor" />
                  <img src="~@/assets/images/zr_iconz_sel.png" class="imgsel" />
                  <el-button round>转让</el-button>
                </div>
              </div>

              <!-- ----------------------我的成员---------------------- -->
              <div class="myMember" v-if="status == 1">
                <!-- <el-button class="invite el-icon-circle-plus" > </el-button> -->
                <div class="invite" @click="addMember">
                  <svg-icon
                    style="font-size: 25px; margin-right: 10px"
                    :icon-class="isUnfold ? 'wenjian' : 'wenjia'"
                    className="sidebar_btn"
                  />
                  邀请成员
                </div>
                <div class="joinIn" v-show="isUnfold">
                  <el-input
                    v-model="inviteObj.phone"
                    maxlength="11"
                    placeholder="请输入手机号码邀请入圈"
                    @focus="showjoinInput"
                    @input="changejoinPhone"
                  ></el-input>
                  <el-button round class="joinBtn" @click="applyFn"
                    >邀请加入</el-button
                  >
                  <!-- 查询手机号弹出框 -->
                  <div
                    class="myAskSelect"
                    :class="joinInShow ? 'joinInShow' : ''"
                  >
                    <ul>
                      <template v-if="joinInList.length > 0">
                        <li
                          @click="selectJoinIn(item)"
                          v-for="item in joinInList"
                          :key="item.id"
                        >
                          <img :src="item.avatar || circleUrl" alt="" />
                          <div>
                            <h3>{{ item.phone }} {{ rulName(item.name) }}</h3>
                          </div>
                        </li>
                      </template>
                      <div v-else>暂无手机号</div>
                    </ul>
                  </div>
                  <!-- 查询手机号弹出框 end -->
                </div>

                <div class="stayBy">
                  <!-- --------------------限额-------------------- -->
                  <!-- <el-form ref="form" :model="quotaForm" label-width="100px" label-position="left">
                    <el-form-item label="限额">
                      <el-input v-model="quotaForm.quota" placeholder="请输入限额" @input="inputQuota"></el-input>
                    </el-form-item>
                  </el-form> -->
                  <!-- --------------------限额--------------------end -->

                  <p class="boxTitle">
                    待通过（{{ unverifiedMemberAskedList.length }}）
                  </p>
                  <ul>
                    <li v-for="item in unverifiedMemberAskedList" :key="item.id">
                      <img :src="item.avatar || circleUrl" alt="" />
                      <div>
                        <div class="stayInfo">
                          <h3>{{ item.nickname }}</h3>
                          <p>申请时间：{{ item.joinTime }}</p>
                        </div>
                        <div class="stayBtn">
                          <el-button
                            round
                            size="mini"
                            @click="auditFn(item, 'no')"
                            >不通过</el-button
                          >
                          <el-button
                            round
                            size="mini"
                            @click="auditFn(item, 'yes')"
                            class="tgBtn"
                            >通过</el-button
                          >
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
                <div class="stayBy">
                  <p class="boxTitle">成员（{{ memberAskedList.length }}）</p>
                  <ul>
                    <li v-for="item in memberAskedList" :key="item.id">
                      <img :src="item.avatar || circleUrl" alt="" />
                      <div>
                        <div class="stayInfo">
                          <h3>{{ item.nickname }}</h3>
                          <p>加入时间：{{ item.joinTime }}</p>
                        </div>
                        <!-- 要我的圈子和当前圈子相同才显示 -->
                        <div class="menUnbind">
                          <div class="roleSet" v-if="$store.state.user.userInfo.whereCircleId == $store.state.user.circleId">
                            <el-checkbox :checked="item.role.includes('1')" @change="clickPer(item)">设为人事管理</el-checkbox>
                            <el-checkbox :checked="item.role.includes('2')" @change="clickCon(item)">设为超级查阅者</el-checkbox>
                          </div>
                          <span @click="unbundleFn(item)">转为好友</span>
                        </div>
                        <!-- --------------------限额-------------------- -->
                        <el-form ref="form" :model="item" label-width="100px" label-position="left">
                          <el-form-item label="限额">
                            <el-input v-model="item.quota" placeholder="请输入限额" @input="inputQuota(item)"></el-input>
                          </el-form-item>
                        </el-form>
                        <!-- --------------------限额--------------------end -->
                      </div>
                    </li>
                    <!-- <li>
                      <img :src="circleUrl" alt="">
                      <div>
                        <div class="stayInfo">
                          <h3>刘易阳</h3>
                          <p>申请时间：2022-04-09 19:09:34</p>
                        </div>
                        <p>解绑</p>
                      </div>
                    </li> -->
                  </ul>
                </div>
              </div>
              <!-- ----------------------我的成员----------------------end -->

              <!-- ----------------------圈子消费---------------------- -->
              <div class="consumption" v-else-if="status == 2">
                <div class="remainingSum">
                  <p>当前余额</p>
                  <div class="sumBox">
                    <h3>{{ balance | sumFilters }} <span>问金</span></h3>
                    <div>
                      <el-button round @click="status = 4">转让</el-button>
                      <el-button round @click="status = 3">充值</el-button>
                    </div>
                  </div>
                </div>
                <ul v-if="ExpenseCalendarList.length">
                  <li v-for="(item, index) in ExpenseCalendarList" :key="index">
                    <img :src="circleUrl" alt="" v-if="item.type=='-1'"/>
                    <img :src="item.avatar || circleUrl" alt="" v-else/>
                    <div>
                      <div class="consumT">
                        <h3>{{ item.type=='-1'?'管理员':item.nickname }}</h3>
                        <p>{{ item.payTime }}</p>
                      </div>
                      <div class="consumB">
                        <p>{{ getCircleTitle(item) }}</p>
                        <p>
                          {{
                            item.type == "-1" ||
                            item.type == "1" ||
                            item.type == "2" ||
                            item.type == "3" ||
                            item.type == "4"
                              ? "+"
                              : "-"
                          }}{{ item.amount || 0 }}问金
                        </p>
                      </div>
                    </div>
                  </li>
                </ul>
                <el-empty description="暂无数据" v-else></el-empty>
              </div>
              <!-- ----------------------圈子消费----------------------end -->

              <!-- ----------------------问金充值------------------------- -->
              <div class="topUp" v-else-if="status == 3">
                <p class="topUpTitle">选择充值圈子</p>
                <div class="myAskAround" @click="clickTopUp">
                  <img
                    :src="(selectRecharge && selectRecharge.avatar) || circleUrl"
                    alt=""
                  />
                  <div>
                    <div class="myAskName">
                      <h3>{{ selectRecharge && selectRecharge.nickname }}</h3>
                      <p>{{ selectRecharge && selectRecharge.phonenumber }}</p>
                    </div>
                    <i
                      class="el-icon-arrow-down"
                      :class="topUpSelect ? 'topUpArrow' : ''"
                    ></i>
                  </div>
                  <div
                    class="myAskSelect"
                    :class="topUpSelect ? 'topUpSelectS' : ''"
                  >
                    <p>
                      您必须是授让圈主的成员方可完成充值
                      <el-button round size="mini" @click="addAskAroundFn"
                        >加入圈子</el-button
                      >
                    </p>
                    <ul>
                      <li
                        @click="selectRechargeFn(item)"
                        v-for="item in addedCircleList"
                        :key="item.id"
                      >
                        <img :src="(item && item.avatar) || circleUrl" alt="" />
                        <div>
                          <h3>{{ item && item.nickname }}</h3>
                          <p>{{ item && item.phonenumber }}</p>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
                <p class="topUpTitle">选择充值方式</p>
                  <div class="payment" >
                      <div class="pay_ac">
                        <svg-icon icon-class="wx_icon" />
                        <span class="m_l_5">微信支付</span>
                      </div>
                </div>
                <p class="topUpTitle">
                  选择充值金额
                  <span>充值成功后可在我的-关于发票申请开票</span>
                </p>
                <ul>
                  <li
                    @click="selectRechargeItemFn(item, index)"
                    :class="index === currentRecharge ? 'isActive check_box' : ''"
                    v-for="(item, index) in voucherList"
                    :key="item.id"
                  >
                    <h3>{{ item.voucher }}问金</h3>
                    <p>售价：{{ item.amount }}元</p>
                  </li>

                  <!-- 自定义问金充值 -->
                  <li
                    class="customAmount"
                    @click="clickCustomAmount"
                    :class="currentRecharge == 'custom' ? 'isActive' : ''"
                  >
                    <div class="customInput" v-if="currentRecharge == 'custom'">
                      <el-input
                        v-model.number="customInputValue"
                        placeholder="请输入充值金额"
                        @input="getQrAmount"
                      >
                        <template slot="append">
                          <el-button type="text" @click="getPayQrCodeByAmount"
                            >确认</el-button
                          >
                        </template>
                      </el-input>
                      <p>获得问金：{{ gainAmount | sumFilters }}</p>
                    </div>
                    <h3 v-else><i class="el-icon-edit"></i> 自定义金额</h3>
                  </li>
                </ul>
                <div v-if="selectRecharge.circleId && rechargeQr" class="payEr">
                  <img :src="rechargeQr" alt="" />
                  <h3>应付金额：{{ payable.amount }}</h3>
                  <!-- <p>支持微信 / 支付宝 / 云支付扫码支付</p> -->
                </div>
                <div class="selectRechargeTip" v-else>请选择充值的圈子与金额</div>
              </div>
              <!-- ----------------------问金充值-------------------------end -->

              <!-- -------------------------问金转让------------------------- -->
              <div class="makeOver" v-else-if="status == 4">
                <!-- <p class="makeOverTitle">选择转让圈子</p> -->

                <div class="myAskAround">
                  <template v-if="selectTransfer.id">
                    <img :src="selectTransfer.avatar || circleUrl" alt="" />
                    <div>
                      <div class="myAskName">
                        <h3>{{ selectTransfer.name }}</h3>
                        <p>
                          {{ selectTransfer.phone }} ·
                          {{ selectTransfer.number }}位成员
                        </p>
                      </div>
                      <i class="el-icon-circle-close" @click="removePhone"></i>
                    </div>
                  </template>
                  <!-- @click="clickmyAsk" -->
                  <div v-else class="myAskAround-title">
                    <el-input
                      v-model.number="makePhone"
                      maxlength="11"
                      placeholder="输入授让圈子的手机号"
                      @input="changeMakePhone"
                      @focus="focusMakePhone"
                    ></el-input>
                  </div>
                  <div
                    class="myAskSelect"
                    :class="myAskSelect ? 'myAskSelectS' : ''"
                  >
                    <ul>
                      <template v-if="circleList.length > 0">
                        <li
                          @click="selectCircle(item)"
                          v-for="item in circleList"
                          :key="item.id"
                        >
                          <img :src="item.avatar || circleUrl" alt="" />
                          <div>
                            <h3>{{ item.phone }} {{ rulName(item.name) }}</h3>
                            <p>{{ item.number }}位成员</p>
                          </div>
                        </li>
                      </template>
                      <div v-else>暂无圈子</div>
                    </ul>
                  </div>
                  <!-- <div class="myAskSelect" :class="myAskSelect?'myAskSelectS':''">
                    <p>您必须是授让圈主的成员方可完成转让 <el-button round size="mini" @click="addAskAroundFn">加入圈子</el-button></p>
                    <ul>
                      <template v-if="(getNoMyselectCircleList(addedCircleList)).length>0">
                        <li @click="selectTransferFn(item)" v-for="item in getNoMyselectCircleList(addedCircleList) " :key="item.id">
                          <img :src="item.avatar || circleUrl" alt="">
                          <div>
                            <h3>{{item.phonenumber}}  {{item.nickname}}</h3>
                            <p>0位成员</p>
                          </div>
                        </li>
                      </template >
                      <div v-else>暂无圈子</div>
                    </ul>
                  </div> -->
                </div>

                <!-- <p class="makeOverTitle">转让问金</p> -->
                <el-form ref="form" label-width="130px" label-position="left">
                  <el-form-item label="可转让余额">
                    <p>{{ userBalance | sumFilters }}</p>
                  </el-form-item>
                  <el-form-item label="转让问金">
                    <el-input
                      placeholder="请输入转让问金"
                      v-model="transfer.amount"
                      size="small"
                      :disabled="!selectTransfer.phone"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="手机号">
                    <p>{{ userPhone }}</p>
                  </el-form-item>
                  <el-form-item label="验证码">
                    <el-input
                      @input="rulCode"
                      v-model="code"
                      placeholder="请输入验证码"
                      size="small"
                      :disabled="!selectTransfer.phone"
                    >
                      <span
                        slot="suffix"
                        @click="obtainVerifyCode"
                        :style="{
                          color: verifyContent.disabled ? 'grey' : '#f87a23',
                          cursor: verifyContent.disabled ? 'unset' : 'pointer',
                        }"
                      >
                        {{
                          verifyContent.disabled
                            ? verifyContent.text
                            : "获取验证码"
                        }}
                      </span>
                    </el-input>
                  </el-form-item>
                </el-form>
                <SubBtn v-if="isPass">
                  <template slot="btn">
                    <el-button round @click="clearInputFn">取消</el-button>
                    <el-button
                      round
                      class="savaBtn"
                      v-if="isPass"
                      @click="transferSava"
                      >确定转让</el-button
                    >
                    <el-button round class="noVerifysavaBtn" v-else
                      >保存</el-button
                    >
                  </template>
                </SubBtn>
              </div>
              <!-- -------------------------问金转让-------------------------end -->
            </template>

            <!-- 成员的话显示这个 -->
            <div class="noData" v-else>
              <img src="~@/assets/images/wjg_img@2x.png" alt="">
              <div class="noData_txt">
                <p>您没有查阅及管理【{{$store.state.user.userInfo.whereCircle}}】圈子的权限</p>
                <p>请联系管理员添加权限，或切换圈子</p>
              </div>
              <div class="noData_list">
                <div class="noData_box" v-for="(circle,index) in circleLIsts" :key="index" @click="clickCutCircle(circle)">{{circle.nickname}}的圈子</div>
              </div>
            </div>
            <!-- 权限是成员的话不能显示圈子end -->
          </NewCard>
        </el-col>
        <el-col :span="8">
          <CircleMember
            ref="CircleMember"
            :OrderList="OrderList"
            :getSelectJoinCircleFn="getSelectJoinCircleFn"
            :addedCircleList="addedCircleList"
          ></CircleMember>
        </el-col>
        <el-col :span="8">
          <MyFriends
            ref="MyFriends"
            :OrderList="OrderList"
            :getSelectJoinCircleFn="getSelectJoinCircleFn"
            :addedCircleList="addedCircleList"
          ></MyFriends>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import { debounce } from "@/wss/utils/wss.js";
import {
  getcirclemaster,
  getPayQrCodeByAmountApi,
  getDepositQrAmountApi,
  updateCircleLogoApi,
  updateCircleRoleApi,
  getCircleRoleApi,
  createDepositOrderApi,
  depositWxPayApi
} from "@/BMViews/api/financial/deposit.js";
import {getCircleIdGetInfoApi,updateQuotaGetInfoApi} from "@/BMViews/api/service/circle.js"
import { getDepositVoucherListAPi } from "@/BMViews/api/financial/depositVoucher.js";
import SubBtn from "./subBtn.vue";
import CircleMember from "./circleMember.vue";
//好友
import MyFriends from "./myFriends.vue";
import lodebounce from "lodash/debounce";
import { getOrderListApi } from "@/BMViews/api/financial/order.js";

import {
  getOrderListApi as getcode,
  getVerificationCodeApi,
} from "@/BMViews/api/login.js";
import {
  getCircleSelectUserOrderApi,
  getselectCircleInviteJoinApi,
  getselectCircleAmountApi,
  getselectUserByCircleApi,
  getCircleRemoveUserApi,
  getCircleAgreeJoinApi,
  getCircleRejectJoinApi,
  getOrderUserConsumptionApi,
} from "@/BMViews/api/service/circle.js";
import NewCard from "@/wss/components/newCard.vue";
import {
  getcircleuserBalanceApi,
  getcircleusertransferApi,
  getcircleuserListApi,
  getCircleListApi,
  getuserBalanceApi,
  getCircleBalanceApi
} from "@/BMViews/api/financial/deposit.js";

import {cutCircleUpdateDefaultApi} from "@/BMViews/api/financial/deposit.js"
export default {
  name: "myAskAround",
  components: { NewCard, SubBtn, CircleMember, MyFriends },
  data() {
    return {
      // ------------------圈子权限------------------
      circleShow: false,// 是否能显示当前圈子
      circleRole: '0',//当前圈子的权限 0成员 1人事管理 2超级查阅者 3目标管理员 多个英文,隔开
      circleLIsts: [],//所有圈子列表
      // ------------------圈子权限------------------end

      // ------------------限额------------------
      quotaForm:{
        id:'',//圈子id
        quota: '', //限额
      },
      // ------------------限额------------------end

      // 默认头像src\assets\images\defaultAvatar.jpg
      DeAvatar: require("@/assets/images/defaultAvatar.jpg"),
      //
      isPass: "",
      // 圈子对象
      circleObj: {
        type: 1,
        id: null,
      },
      inviteObj: {
        id: "",
        phone: "",
      },

      joinInShow: false, // 邀请成员的弹出框显示隐藏
      joinInList: [], //邀请成员搜索手机号列表

      // 获取验证码按钮
      verifyContent: {
        disabled: false,
        text: "获取验证码",
        time: 60,
      },
      // 转让圈子参数
      transfer: { amount: "", circleId: "" },
      moneyList: [
        {
          AskGold: 6000,
        },
      ],

      makePhone: "", //问金转让的手机号
      circleList: [], // 查询的圈子转让列表
      coutimer: "", // 转让问金的定时器

      userPhone: this.$store.state.user.phonenumber,
      // 充值二维码
      rechargeQr: "",

      customInputValue: null, //输入的充值金额
      gainAmount: 0, //获得的充值金额

      // 当前选择充值的哪一项
      currentRecharge: "",
      // 圈子余额
      balance: "",
      //可以转让的余额
      userBalance: "",
      // 已加入的圈
      addedCircleList: [],
      // 没有通过的圈子成员
      unverifiedMemberAskedList: [],
      // 圈子成员
      memberAskedList: [],
      // 邀请成员是否显示
      isUnfold: false,
      // 圈子id
      circleId: "",
      status: 1, //1我的成员  2圈子消费  3问金充值  4问金转让
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", //头像

      topUpSelect: false, //问金充值的下拉框
      myAskSelect: false, //问金转让的下拉框
      //  选择为圈充值
      selectRecharge: {},
      //  选择为圈转让
      selectTransfer: {},
      // 消费订单id查询
      orderListParams: {
        circleId: "",
        status: "0,2,3",
      },
      OrderList: [],
      // 充值数据列表
      voucherList: [],
      // 选择充值的
      payable: {},
      // 问金充值验证码
      code: "",
      // 充值的定时器
      timer: "",
      ExpenseCalendarList: [],
      myRecords: [], //我的消费记录
    };
  },
  async created() {
    if(!this.$store.state.user.userInfo.whereCircleId) return
    await this.getcircleuserBalanceFn(); //获取圈子id和圈子余额
    await this.getCircleRole() // 查询在这个圈子的角色
    await this.getSelectJoinCircleFn(); // 获取所加入的圈子

    // 有查看权限才去发请求
    if(this.circleShow){
      await this.getuserBalanceFn(); //可转让的余额
      await this.getselectUserByCicleFn(); // 获取圈子成员列表
      await this.getCircleGetInfo() // 获取当前圈子的详细信息

      this.unverifiedGetselectUserByCircleFn(); // 获取申请加入圈子成员列表
      this.getCircleSelectUserOrderFn(); //获取消费记录
      // this.getOrderListFn();
      this.getDepositVoucherListFn(); // 获取问金充值额
      this.getOrderUserConsumption(); //获取我的消费记录
    }

    // 路由传参（点击余额不足跳转的）
    if (this.$route.query.status) {
      let status = this.$route.query.status;
      this.status = status;
    }
    // 路由传参（点击余额不足跳转的）
  },
  mounted() {
    // 点击其他位置隐藏悬浮邀请成员
    document.addEventListener("click", (e) => {
      let thisClassName = e.target.className;
      if (thisClassName != "joinIn") {
        this.joinInShow = false; //点击其他区域关闭
      } else {
        this.joinInShow = true; //点击其他区域关闭
      }
    });

    // 点击其他位置隐藏悬浮问金转让
    document.addEventListener("click", (e) => {
      let thisClassName = e.target.className;
      if (thisClassName != "myAskAround-title") {
        this.myAskSelect = false; //点击其他区域关闭
      } else {
        this.myAskSelect = true; //点击其他区域关闭
      }
    });

    // 用$bus通知圈子页面刷新数据
    this.$bus.$on('circleRefreshDataBus',async ()=>{
      await this.getcircleuserBalanceFn(); //获取圈子id和圈子余额
      await this.getCircleRole() // 重新查询在这个圈子的角色
      await this.getSelectJoinCircleFn() // 获取所加入的圈子
      // 有查看权限才去发请求
      if(this.circleShow){
        await this.getselectUserByCicleFn(); // 获取圈子成员列表
        await this.getuserBalanceFn(); //可转让的余额
        await this.getCircleGetInfo() // 获取当前圈子的详细信息

        this.unverifiedGetselectUserByCircleFn(); // 获取申请加入圈子成员列表
        this.getCircleSelectUserOrderFn(); //获取消费记录
        this.getDepositVoucherListFn(); // 获取问金充值额
        this.getOrderUserConsumption(); //获取我的消费记录
      }
    })
  },
  computed: {
    // 过滤出不是自己的圈子
    getNoMyselectCircleList() {
      return (list) => {
        return list.filter((item) => item.userId != this.$store.getters.userId);
      };
    },
  },
  beforeDestroy() {
    // 消除定时器
    clearInterval(this.timer);
    // 销毁$bus监听
    this.$bus.$off('circleRefreshDataBus')
  },
  watch: {
    status(newVal) {
      console.log(newVal);
      clearInterval(this.timer);
    },
    "$store.state.user.userInfo.whereCircleId":{
      async handler(){
        if(!this.$store.state.user.userInfo.whereCircleId) return
        await this.getcircleuserBalanceFn(); //获取圈子id和圈子余额
        await this.getCircleRole() // 查询在这个圈子的角色
        await this.getSelectJoinCircleFn(); // 获取所加入的圈子

        // 有查看权限才去发请求
        if(this.circleShow){
          await this.getuserBalanceFn(); //可转让的余额
          await this.getselectUserByCicleFn(); // 获取圈子成员列表
          await this.getCircleGetInfo() // 获取当前圈子的详细信息

          this.unverifiedGetselectUserByCircleFn(); // 获取申请加入圈子成员列表
          this.getCircleSelectUserOrderFn(); //获取消费记录
          // this.getOrderListFn();
          this.getDepositVoucherListFn(); // 获取问金充值额
          this.getOrderUserConsumption(); //获取我的消费记录
        }
      },
    },
  },
  methods: {
    // -----------------------限额-----------------------
    // 获取当前圈子的详细信息
    async getCircleGetInfo(){
      let circleId = this.$store.state.user.userInfo.whereCircleId
      let result = await getCircleIdGetInfoApi({circleId})
      if(result.code==200){
        this.quotaForm.id = result.data.id //圈子id
        this.quotaForm.quota = result.data.quota || ''
      }
    },

    // 修改限额的输入框
    inputQuota: lodebounce(async function(item){
      await this.updateQuotaGetInfo(item) // 修改限额接口
    },300),

    // 修改限额接口
    async updateQuotaGetInfo(item){
      let result = await updateQuotaGetInfoApi(item)
      if(result.code==200){
        this.$message({message: '修改成功',type: 'success'});
      }
    },
    // -----------------------限额-----------------------end

    // ------------------上传圈子logo------------------
    // 上传的钩子
    uploadLogo(file){
      // console.log(file,'上传圈子logo上传圈子logo');
      //上传判断
      const isFormat = file.raw.type === "image/jpeg" || file.raw.type === "image/png";
      const isLt2M = file.raw.size / 1024 / 1024 < 2;
      if (!isFormat) {
        this.$message.error("只支持JPG、PNG格式!");
        return;
      }
      if (!isLt2M) {
        this.$message.error("上传附件大小不能超过 2MB!");
        return;
      }
      // 上传的接口
      this.updateCircleLogo(file.raw)
    },

    // 上传圈子logo
    async updateCircleLogo(file){
      let formDate = new FormData();
      formDate.set("file", file);
      let result = await updateCircleLogoApi(formDate)
      if(result.code==200){
        this.$message({type:'success',message:'上传成功'})
        // 更新vuex的数据
        this.$store.dispatch("GetInfo").then(() => {
          console.log('更新vuex成功');
        }).catch(() => {});
      }
    },

    // 切换圈子
    clickCutCircle(circle){
      this.cutCircleUpdateDefault(circle.circleId) // 切换圈子的接口
    },

    // 切换圈子的接口
    async cutCircleUpdateDefault(circleId){
      let result = await cutCircleUpdateDefaultApi(circleId)
      if (result.code == 200) {
        this.$message({type:'success',message:'成功切换圈子'})
        // 更新vuex的数据
        this.$store.dispatch("GetInfo").then(async () => {
          await this.getcircleuserBalanceFn(); //获取圈子id和圈子余额
          await this.getSelectJoinCircleFn() // 获取所加入的圈子
          await this.getCircleRole() // 重新查询在这个圈子的角色
          await this.getselectUserByCicleFn(); // 获取圈子成员列表
          await this.getuserBalanceFn(); //可转让的余额
          this.unverifiedGetselectUserByCircleFn(); // 获取申请加入圈子成员列表
          this.getCircleSelectUserOrderFn(); //获取消费记录
          this.getDepositVoucherListFn(); // 获取问金充值额
          this.getOrderUserConsumption(); //获取我的消费记录
        }).catch(() => {});
      }
    },
    // ------------------上传圈子logo------------------end


    // 去掉‘的圈子’，并且只显示名字最后一个字
    rulName(name) {
      let reg = new RegExp("的圈子", "g");
      let rulName = name.replace(reg, "");
      return new Array(rulName.length).join("*") + rulName.substr(-1);
    },

    // -------------------------------邀请成员弹出框-------------------------------
    // 显示弹出框
    showjoinInput() {
      // this.joinInShow = true
    },

    // 失去焦点关闭弹出框
    blurCloseJoinInput() {
      this.joinInShow = false;
    },

    // 输入手机号发请求 防抖
    changejoinPhone: lodebounce(function () {
      if (
        this.inviteObj.phone.length == 11 ||
        this.inviteObj.phone.length == 0
      ) {
        this.joinInShow = false;
      } else {
        this.joinInShow = true;
      }
      this.getjoinInList(); // 手机号查询圈子的接口
    }, 500),

    // 手机号查询圈子的接口
    async getjoinInList() {
      let isFilter = 1; //过滤掉自己圈子的人
      let phone = this.inviteObj.phone;
      if (phone == "") return;
      let result = await getCircleListApi(phone, isFilter);
      if (result.code == 200) {
        this.joinInList = result.rows;
      }
    },

    // 选择一条手机号
    selectJoinIn(item) {
      this.inviteObj.phone = item.phone;
      this.joinInShow = false;
    },
    // -------------------------------邀请成员弹出框-------------------------------end

    // 获取当前消费记录的标题
    getCircleTitle(item) {
      if (item.type == "1" || item.type == "2") {
        return "问金充值";
      } else if (item.type == "3") {
        return "银行转账";
      } else if (item.type == "4") {
        return "问金受让";
      } else if (item.type == "5") {
        return item.title;
      } else if (item.type == "-1") {
        return "系统赠送";
      }
    },

    // 获取消费记录
    async getCircleSelectUserOrderFn() {
      // let circleId = this.addedCircleList.find((item) => {
      //   if (item.userId == this.$store.getters.userId) {
      //     return true;
      //   }
      // })?.circleId;
      let circleId = this.circleId
      let { rows, code } = await getCircleSelectUserOrderApi({ circleId });
      if (code != 200) return;
      this.ExpenseCalendarList = JSON.parse(JSON.stringify(rows));
    },

    // 加入圈子
    addAskAroundFn() {
      this.$refs.CircleMember.changeStatus(1);
    },

    // 验证验证码
    async rulCode() {
      const _this = this;
      if (_this.code == "" || _this.code.length != 4) return;
      let { code } = await getVerificationCodeApi({
        code: _this.code,
        mobile: _this.userPhone,
      });
      if (code != 200) return;

      _this.isPass = true;
    },

    // 发送验证码
    async obtainVerifyCode() {
      // 防抖
      debounce(async () => {
        var self = this;
        if (self.verifyContent.disabled) {
          return;
        }
        if (self.validePhone()) {
          // 发送短信接口请求
          let { code } = await getcode(this.userPhone);
          if (code != 200) return;
          self.countDown();
          this.$message({
            type: "success",
            message: "已发送",
          });
        }
      }, 50)();
    },

    // 倒计时方法
    countDown() {
      var time = 60;
      this.verifyContent.disabled = true;
      this.verifyContent.text = `重新获取(${time}s)`;
      this.coutimer = setInterval(() => {
        if (time == 0) {
          clearInterval(this.coutimer);
          this.verifyContent.disabled = false;
          this.verifyContent.text = "获取验证码";
        } else {
          this.verifyContent.disabled = true;
          this.verifyContent.text = `重新获取(${time}s)`;
          time--;
          // this.verifyContent.time--;
        }
      }, 1000);
    },

    // 验证手机号
    validePhone() {
      console.log(!/^1[3456789]\d{9}$/.test(this.userPhone));
      if (["", null, undefined].includes(this.userPhone)) {
        this.$message({
          type: "warning",
          message: "请输入手机号",
        });
        return false;
      } else if (!/^1[3456789]\d{9}$/.test(this.userPhone)) {
        this.$message({
          type: "warning",
          message: "请输入正确的手机号码",
        });
        return false;
      } else {
        return true;
      }
    },

    // 清空输入框
    clearInputFn() {
      this.transfer = { amount: "", circleId: "" };
      this.code = "";
    },

    // 保存问金转让 防抖
    transferSava: lodebounce(async function () {
      const transfer = this.transfer;
      // const circleId = this.selectTransfer.circleId;
      const phone = this.selectTransfer.phone;
      transfer.phone = phone;
      let arr = ["", undefined, null];

      if (arr.includes(phone)) {
        this.$message({
          message: "请先选择圈子",
          type: "warming",
        });
        return;
      }
      let { code, msg } = await getcircleusertransferApi(transfer);
      if (code != 200) return;
      this.getCircleSelectUserOrderFn(); // 重新获取消费记录
      this.getcircleuserBalanceFn(); // 重新获取余额
      this.getuserBalanceFn(); // 重新获取可转让的余额
      this.isPass = false;
      this.code = "";
      this.transfer.amount = "";
      this.selectTransfer = {}; //清除已选
      this.makePhone = ""; //清除已选的手机号
      clearInterval(this.coutimer);
      this.verifyContent.disabled = false; // 还原倒计时

      this.$message({
        message: msg,
        type: "success",
      });
    }, 1200),

    //滚动条保持最底部方法 点击二维码滚动到底部
    scrollToBottom() {
      this.$nextTick(() => {
        var container = this.$el.querySelector(
          ".label-box-content .el-card__body > div"
        );
        container.scrollTop = container.scrollHeight;
      });
    },

    // 生成预设的充值二维码
    async selectRechargeItemFn(item, index) {
      this.currentRecharge = index
      let arr = ["", undefined, null];
      // 获取圈子id
      const circleId = this.selectRecharge.circleId;
      // 没有选择圈子不能充值
      if (arr.includes(circleId)) {
        this.$message({
          message: "请选择圈子",
          type: "warning",
        });
        return;
      }
      console.log(item,'---');
    //先创建消费充值订单
      let orderRes = await this.addCreateDocOrder(circleId,item)
      let data = {
        id: orderRes.id,
        type: 'native',
      }
     let res =   await depositWxPayApi(data)
     if(res.code == 200){
          this.payable.amount = item.amount + '元'; //本次充值的金额
          this.rechargeQr = res.data.wxQrcode
     }







      // -----------------------聚合支付的支付步骤
      // // 整理数据
      // let obj = {
      //   circleId: circleId, //圈子id
      //   id: item.id, //充值预设的id
      //   type: 2, //返回二维码base64
      //   email: this.$store.state.user.email, //邮箱
      // };

      // this.payable = JSON.parse(JSON.stringify(item));
      // // 预设的问金充值
      // let { code, QrCode, order } = await getcirclemaster(obj);
      // if (code != 200) return;
      // this.rechargeQr = QrCode;
      // this.scrollToBottom(); //滚动到底部
      // this.currentRecharge = index;

      // // 生成之前都清除上一个定时器
      // clearInterval(this.timer);
      // this.timer = setInterval(() => {
      //   this.verifyOrderFn(order);
      // }, 5000);
    },
    // 创建问金充值订单
    async  addCreateDocOrder(circleId,item){
          try {
            let argument = {
            amount:item.amount,
						circleId,
            id:item.id
            }

            const res = await createDepositOrderApi(argument)
            return res.data
          } catch (error) {

          }
      },
    // 获取自定义问金充值支付二维码
    async getPayQrCodeByAmount() {
      let arr = ["", undefined, null];
      // 获取圈子id
      const circleId = this.selectRecharge.circleId;
      // 没有选择圈子不能充值
      if (arr.includes(circleId)) {
        this.$message({ message: "请选择圈子", type: "warning" });
        return;
      }
      // 判断金额是否正常
      let reg = /^\+?[1-9][0-9]*$/;
      let amount = this.customInputValue;
      if (!reg.test(amount)) {
        this.$message({ message: "请输入正确的金额", type: "warning" });
        return;
      }
      console.log(this.customInputValue,'打印出来的金额');
      this.payable.amount = JSON.parse(JSON.stringify(this.customInputValue)); //本次充值的金额
      // 整理数据
      let data = {
        circleId: circleId, //圈子id
        amount: this.customInputValue, //本次充值的金额
      };
     let order  = await createDepositOrderApi(data)
       //先创建消费充值订单
      let orderRes = order.data
      let datas = {
        id: orderRes.id,
        type: 'native',
      }
     let res =   await depositWxPayApi(datas)
     if(res.code == 200){
          console.log(res,'产生回调的信息111');
          this.rechargeQr = res.data.wxQrcode
     }
      // let { code, QrCode, order } = await getPayQrCodeByAmountApi(data);
      // if (code != 200) return;
      // this.rechargeQr = QrCode;
      // this.scrollToBottom(); //滚动到底部
      // // 生成之前都清除上一个定时器
      // clearInterval(this.timer);
      // this.timer = setInterval(() => {
      //   this.verifyOrderFn(order);
      // }, 5000);
    },

    // 获取自定义金额充值后获得多少问金 防抖
    getQrAmount: lodebounce(async function () {
      let amount = this.customInputValue;
      this.gainAmount = 0;
      if (!amount || amount < 0) return;
      let result = await getDepositQrAmountApi(amount);
      if (result.code == 200) {
        this.gainAmount = result.amount;
      }
    }, 500),

    // 判断是否充值成功
    async verifyOrderFn(order) {
      let { code, rows } = await getcircleuserListApi({ orderNo: order });
      if (code != 200) return;

      if (rows[0]?.status == 2) {
        this.$message({
          message: "充值成功",
          type: "success",
        });
        clearInterval(this.timer);
        this.rechargeQr = "";
        this.getCircleSelectUserOrderFn(); // 重新获取消费记录
        this.getcircleuserBalanceFn(); // 重新获取余额
        this.getuserBalanceFn(); // 重新获取余额
        this.customInputValue = ""; //清除自定义金额
        this.currentRecharge = ""; //清除自定义金额
      }
    },

    // 获取问金充值额
    async getDepositVoucherListFn() {
      let { code, rows } = await getDepositVoucherListAPi();
      if (code != 200) return;
      this.voucherList = JSON.parse(JSON.stringify(rows));
    },

    // 点击问金充值的自定义金额
    clickCustomAmount() {
      this.currentRecharge = "custom";
    },

    // 获取订单列表
    async getOrderListFn() {
      // this.orderListParams.circleId = this.circleId;
      this.orderListParams.userId = this.$store.state.user.userId;
      // this.orderListParams.circleId = this.addedCircleList.find((item) => {
      //   if (item.userId == this.$store.getters.userId) {
      //     return true;
      //   }
      // })?.circleId;
      let { code, rows } = await getOrderListApi(this.orderListParams);
      if (code != 200) return;
      this.OrderList = JSON.parse(JSON.stringify(rows));
    },

    // 获取我的消费记录
    async getOrderUserConsumption() {
      let result = await getOrderUserConsumptionApi();
      if (result.code == 200) {
        this.OrderList = result.rows;
      }
    },

    // -------------------------------问金转让通过手机号查询-----------------------------

    // 获取焦点打开弹出框
    focusMakePhone() {
      // this.myAskSelect = true
    },

    // 失去焦点关闭弹出框
    blurCloseMakePhone() {
      this.myAskSelect = false;
    },

    // 输入手机号发请求 防抖
    changeMakePhone: lodebounce(function () {
      if (this.makePhone.length == 11 || this.makePhone.length == 0) {
        this.myAskSelect = false;
      } else {
        this.myAskSelect = true;
      }

      this.getCircleList(); // 手机号查询圈子的接口
    }, 500),

    // 手机号查询圈子的接口
    async getCircleList() {
      let phone = this.makePhone;
      if (phone == "") return;
      let result = await getCircleListApi(phone);
      if (result.code == 200) {
        // 把自己过滤掉
        this.circleList = result.rows.filter((item) => {
          if (item.phone != this.$store.state.user.phonenumber) {
            return item;
          }
        });
      }
    },

    // 选择手机号
    selectCircle(item) {
      this.selectTransfer = item;
      this.myAskSelect = false;
    },

    // 删除当前选中的手机号
    removePhone() {
      this.selectTransfer = {};
    },

    // -------------------------------问金转让通过手机号查询----------------------------- end

    // 选择问金转让
    selectTransferFn(item) {
      this.selectTransfer = item;
    },

    // 选择为圈充值
    selectRechargeFn(item) {
      this.selectRecharge = item;
    },

    // 审核是否通过
    async auditFn(item, status) {
      console.log(item);
      let result = null;
      console.log({
        id: this.circleId,
        userId: item.userId,
      });
      // 同意
      if (status == "yes") {
        result = await getCircleAgreeJoinApi({
          id: this.circleId,
          userId: item.userId,
        });
      } else {
        result = await getCircleRejectJoinApi({
          id: this.circleId,
          userId: item.userId,
        });
      }
      if (result && result.code != 200) return;

      this.$message({
        type: "success",
        message: result.msg,
      });
      this.getselectUserByCicleFn();
      this.unverifiedGetselectUserByCircleFn();
    },

    // 邀请成员
    applyFn: lodebounce(async function () {
      this.inviteObj.id = this.circleId;
      let { code, msg } = await getselectCircleInviteJoinApi(this.inviteObj);
      if (code != 200) return;

      this.$message({
        type: "success",
        message: msg,
      });
      this.getselectUserByCicleFn();
      this.inviteObj.phone = "";
      // this.unverifiedGetselectUserByCircleFn();
    }, 500),

    // 获取所加入的圈子
    async getSelectJoinCircleFn() {
      let { code, rows } = await getselectCircleAmountApi({ myself: true });
      if (code != 200) return;
      console.log(rows, "这是谁");
      this.addedCircleList = JSON.parse(JSON.stringify(rows));
      //默认选中的圈子
      this.selectRecharge = this.addedCircleList[0];

      let circleId = this.circleId
      // 过滤除了当前圈子
      this.circleLIsts = rows.filter(item=>{
        if(item.circleId != circleId){
          return item
        }
      })
    },

    // 添加成员
    addMember() {
      this.isUnfold = !this.isUnfold;
    },

    // 解绑函数
    async unbundleFn(data) {
      let { code, msg } = await getCircleRemoveUserApi({
        id: this.circleId,
        userId: data.userId,
      });
      if (code != 200) return;
      this.$message({
        type: "success",
        message: msg,
      });
      this.getselectUserByCicleFn();
    },

    // 获取圈子id
    async getcircleuserBalanceFn() {
      // 当前所在的圈子id
      this.circleId = this.$store.state.user.userInfo.whereCircleId
      // console.log(this.circleId,'当前所在的圈子id');
      let circleId = this.$store.state.user.userInfo.whereCircleId
      let { code, data } = await getCircleBalanceApi({circleId});

      if (code != 200) return;
      // 圈子id
      // this.circleId = data.circleId;
      // 圈子余额
      this.balance = data.balance == undefined ? 0 : data.balance;
    },

    // 获取可转让的问金余额（和问金余额不一样）
    async getuserBalanceFn() {
      let { code, data } = await getuserBalanceApi();
      if (code != 200) return;
      this.userBalance = data.balance == undefined ? 0 : data.balance;
    },

    // 获取申请加入圈子成员列表
    async unverifiedGetselectUserByCircleFn() {
      this.circleObj.id = this.circleId;
      this.circleObj.type = 2;
      let { code, rows } = await getselectUserByCircleApi(this.circleObj);
      if (code != 200) return;
      this.unverifiedMemberAskedList = JSON.parse(JSON.stringify(rows));
    },

    // 获取圈子成员列表
    async getselectUserByCicleFn() {
      this.circleObj.type = 1;
      this.circleObj.circleId = this.circleId;
      let { code, rows } = await getselectUserByCircleApi(this.circleObj);
      if (code != 200) return;
      this.memberAskedList = JSON.parse(JSON.stringify(rows));
    },

    // 点击问金充值的下拉箭头
    clickTopUp() {
      this.topUpSelect = !this.topUpSelect;
    },

    // 点击问金转让的下拉箭头
    clickmyAsk() {
      this.myAskSelect = !this.myAskSelect;
    },

    // -----------------------------设置人事管理和超级查阅者-----------------------------
    // 查询在这个圈子的角色
    async getCircleRole(){
      let data = {
        circleId: this.circleId, //当前这个圈的圈子id
      }
      let result = await getCircleRoleApi(data)
      if(result.code==200){
        // 判断是自己的圈子的话直接展示
        let circleId = this.$store.state.user.circleId
        if(this.circleId == circleId){
          // 是自己的圈子
          this.circleShow = true //能显示圈子
          this.circleRole = '0,1,2'
        }else{
          // 不是自己的圈子
          if(result.data.role.includes('1')||result.data.role.includes('2')){
            this.circleShow = true //能显示圈子
            this.circleRole = result.data.role || '0' //当前圈子权限
            if(result.data.role.includes('2')){
              this.status = '2' //显示账单 订单查阅者
            }
          }else{
            this.circleShow = false //不能显示圈子
            this.circleRole = result.data.role || '0' //当前圈子权限
          }
        }
      }
    },

    // 点击人事管理
    clickPer: lodebounce(function (item) {
      console.log(item,'xxxxxxxxxxxxxxxx');
      let data = {
        circleId: this.circleId, //当前这个圈的圈子id
        userId: item.userId, //用户id(要修改的用户)
      }
      // 判断角色 应该改为什么状态
      let role = item.role.split(',')
      if(item.role.includes('1')){
        let index = role.indexOf('1')
        role.splice(index, 1)// 删除人事管理
        console.log(index);
      }else{
        role.push('1') //设置人事管理
        role = role.sort((a, b) => Number(a)- Number(b)) //正序
      }
      data.role = [...new Set(role)].join(',')
      this.updateCircleRole(data) //任命的接口
    },300),

    // 点击超级查阅者
    clickCon: lodebounce(function(item){
      console.log('点击超级查阅者');
      let data = {
        circleId: this.circleId, //当前这个圈的圈子id
        userId: item.userId, //用户id(要修改的用户)
      }
      // 判断角色
      let role = item.role.split(',')
      if(item.role.includes('2')){
        let index = role.indexOf('2')
        role.splice(index, 1)// 删除查阅者
        console.log(index);
      }else{
        role.push('2') //设置查阅者
        role = role.sort((a, b) => Number(a)- Number(b)) //正序
      }
      data.role = [...new Set(role)].join(',')
      this.updateCircleRole(data) //任命的接口
    },300),

    // 任命用户角色(人事和查阅者)
    async updateCircleRole(data){
      let result = await updateCircleRoleApi(data)
      if(result.code==200){
        this.getselectUserByCicleFn() //刷新成员列表
        this.$message({type: "success",message: '设置成功',});
      }
    },
    // -----------------------------设置人事管理和超级查阅者-----------------------------end

  },
};
</script>

<style scoped>
/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
::v-deep .label-box-content .el-card__body {
  position: relative;
  padding: 0 0 30px 0;
}
::v-deep .label-box-content .el-card__body .top {
  margin: 0 30px;
}
::v-deep .label-box-content .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}
.payment{
     position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #efefef;
  padding-bottom: 30px;
  cursor: pointer;

}
.m_l_5{
  margin-left: 5px;
}
.payment >  div{

   display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 0;
    border: 1px solid #d7d7d7;
    border-radius: 30px;
  }
  .payment .pay_ac{
    background-color: #f87a23;
    color: #fff;
  }
ul,
p,
h3 {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd30 {
  padding: 0 30px;
}

/* 一级 */
.tabOne {
  display: flex;
  justify-content: space-evenly;
  border: 1px solid #e5e6e9;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 26px 0;
  margin-top: 15px;
  margin-left: 30px;
  margin-right: 30px;
}
.tabOne .tablist {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.tabOne .tablist img {
  width: 36px;
}
.tabOne .tablist img.imgsel {
  display: none;
}
.tabOne .tablist.isActive img.imgsel {
  display: block;
}
.tabOne .tablist.isActive img.imgnor {
  display: none;
}

.tabOne .tablist button {
  color: #686975;
  font-size: 16px;
  background-color: transparent;
  border: 2px solid #c8cce2;
  padding: 6px 20px;
  margin-top: 18px;
}
.tabOne .tablist::before {
  content: "";
  display: none;
  position: absolute;
  bottom: -26px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #e5e6e9;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.tabOne .tablist::after {
  content: "";
  display: none;
  position: absolute;
  bottom: -27px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #fff;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

.tabOne .tablist.isActive button,
.tabOne .tablist button:hover {
  color: #fff;
  background-color: #6a769f;
  border-color: #6a769f;
}
.tabOne .tablist.isActive::before {
  display: block;
}
.tabOne .tablist.isActive::after {
  display: block;
}

/* 我的成员 */
.myMember {
  padding: 0 30px;
}
.myMember .invite {
  display: flex;
  align-items: center;
  border: 0;
  padding: 0;
  color: #333;
  font-size: 16px;
  margin: 20px 0;
  cursor: pointer;
}
.myMember .invite:before {
  font-size: 24px;
  color: #f87a23;
  margin-right: 10px;
}
.myMember .invite:hover,
.myMember .invite:focus {
  background-color: transparent;
}
.myMember .boxTitle {
  font-size: 12px;
  color: #999999;
  margin-bottom: 15px;
}

.myMember .stayBy {
  border-top: 1px solid #efefef;
  padding-top: 30px;
}
.myMember .stayBy:last-child {
  border-top: 0;
}
.myMember .stayBy li {
  display: flex;
  flex-wrap: wrap;
}
.myMember .stayBy li > img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
}
.myMember .stayBy li > div {
  display: flex;
  flex-wrap: wrap;
  /* flex-grow: 1; */
  width: calc(100% - 52px);
  justify-content: space-between;
  border-bottom: 1px solid #efefef;
  /* padding-bottom: 20px; */
  margin-bottom: 15px;
}
.myMember .stayBy li .el-form{
  width: 100%;
}
.myMember .stayBy li .el-form-item{
  margin: 15px 0;
}
.myMember .stayBy li .el-input{
  width: 100%;
}

.myMember .stayBy li h3 {
  font-size: 16px;
  color: #333333;
  line-height: 22px;
}
.myMember .stayBy li p {
  display: flex;
  align-items: flex-end;
  font-size: 12px;
  color: #999999;
  line-height: 17px;
  margin-top: 5px;
}
.myMember .stayBy li .el-button {
  font-size: 14px;
  color: #666666;
  padding: 5px 0;
  width: 70px;
}
.myMember .stayBy li .el-button.tgBtn {
  border: 1px solid #f87a23;
  color: #f87a23;
}
.myMember .stayBy li .el-button:hover,
.myMember .stayBy li .el-button:focus {
  background-color: #fef2e9;
  border: 1px solid #ecedf0;
}

.roleSet >>> .el-checkbox__label{
  font-size: 12px;
  color: #999;
  padding-left: 5px;
}
.roleSet >>> .is-checked .el-checkbox__label{
  color: #f87a23;
}
.roleSet >>> .el-checkbox__inner{
  border-radius: 50%;
}
</style>
<style scoped>
/* 圈子消费 */
.consumption {
  padding: 0 30px;
  padding-top: 25px;
}
.consumption .remainingSum {
  border-radius: 12px;
  border: 1px solid #efefef;
  padding: 20px 15px;
  margin-bottom: 30px;
}
.consumption .remainingSum > p {
  font-size: 14px;
  color: #999999;
  margin-bottom: 18px;
}
.consumption .remainingSum .sumBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.consumption .remainingSum .sumBox > h3 {
  font-size: 26px;
  font-weight: bold;
  color: #f87a23;
}
.consumption .remainingSum .sumBox > h3 > span {
  font-size: 16px;
  font-weight: 400;
}
.consumption .remainingSum .sumBox .el-button {
  width: 90px;
  padding: 10px 0;
  color: #f87a23;
  border-color: #f87a23;
}
.consumption .remainingSum .sumBox .el-button:hover,
.consumption .remainingSum .sumBox .el-button:focus {
  background-color: #fef2e9;
}
.consumption li {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.consumption li > img {
  width: 40px;
  height: 40px;
  margin-right: 12px;
  border-radius: 50%;
}
.consumption li > div {
  width: calc(100% - 52px);
}
.consumption li .consumT {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.consumption li .consumT > h3 {
  font-size: 16px;
  color: #333333;
}
.consumption li .consumT > p {
  font-size: 12px;
  color: #999999;
}
.consumption li .consumB {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #f4f5f8;
  border-radius: 6px;
  padding: 10px;
  font-size: 14px;
  color: #333;
}

.consumption li .consumB:last-child {
  font-size: 12px;
}
.consumption li .consumB p {
  word-break: break-word;
}
.consumption li .consumB p:first-child {
  width: calc(100% - 85px);
}
.consumption li .consumB p:last-child {
  width: 85px;
  text-align: right;
}
</style>
<style scoped>
/* 问金充值 */
.topUp {
  padding: 0 30px;
}
.topUp .topUpTitle {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999999;
  padding: 30px 0;
}
.topUp .topUpTitle > span {
}
.topUp .myAskAround {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #efefef;
  padding-bottom: 30px;
  cursor: pointer;
}
.topUp .myAskAround > img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-right: 15px;
}
.topUp .myAskAround > div {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
}
.topUp .myAskAround .myAskName > h3 {
  font-size: 20px;
  color: #333333;
}
.topUp .myAskAround .myAskName > p {
  font-size: 12px;
  color: #999999;
  margin-top: 10px;
}

.topUp .myAskAround > div > i {
  width: 12px;
  height: 12px;
  transition: all 0.3s;
}
.topUp .myAskAround > div > i.topUpArrow {
  transform: rotate(180deg);
}
.topUp .myAskAround .myAskSelect {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 1;
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 2px 4px 16px 2px rgba(201, 201, 201, 0.5);
}
.topUp .myAskAround .myAskSelect.topUpSelectS {
  display: block;
}
.topUp .myAskAround .myAskSelect > p {
  font-size: 12px;
  color: #999999;
  margin-bottom: 25px;
}
.myAskAround .invite {
  display: flex;
  align-items: center;
  border: 0;
  padding: 0;
  color: #333;
  font-size: 16px;
  margin-bottom: 20px;
}
.myAskAround .invite:before {
  font-size: 24px;
  color: #f87a23;
  margin-right: 10px;
}
.myAskAround .invite:hover,
.myAskAround .invite:focus {
  background-color: transparent;
}
.topUp .myAskAround .myAskSelect > p > .el-button {
  border: 1px solid #39486f;
  color: #39486f;
  padding: 4px 10px;
}

.topUp .myAskAround .myAskSelect ul {
  max-height: 210px;
  overflow-y: auto;
}
.topUp .myAskAround .myAskSelect ul::-webkit-scrollbar {
  width: 0;
}
.topUp .myAskAround .myAskSelect li {
  display: flex;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #efefef;
}
.topUp .myAskAround .myAskSelect li > img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 15px;
}
.topUp .myAskAround .myAskSelect li h3 {
  font-size: 16px;
  color: #333333;
}
.topUp .myAskAround .myAskSelect li p {
  font-size: 12px;
  color: #999999;
  margin-top: 8px;
}

.topUp > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.topUp > ul > li {
  width: 32%;
  background-color: #f4f5f8;
  border-radius: 12px;
  text-align: center;
  padding: 20px 0;
  margin-bottom: 10px;
  cursor: pointer;
}
.topUp > ul > li h3 {
  font-size: 18px;
  color: #38476d;
}
.topUp > ul > li p {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}

/* 自定义金额 */
.topUp > ul > li.customAmount {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  min-height: 90px;
}
.topUp > ul > li.customAmount .customInput {
  width: 100%;
  padding: 0 15px;
}
.topUp > ul > li.customAmount >>> .el-input {
  position: relative;
}
.topUp > ul > li.customAmount >>> .el-input__inner {
  border-radius: 20px;
}
.topUp > ul > li.customAmount >>> .el-input-group__append {
  position: absolute;
  top: 10px;
  right: 24px;
  padding: 0;
  background-color: transparent;
  border: 0;
  color: #39486f;
}
.topUp > ul > li.customAmount >>> .el-input-group__append .el-button {
}
/* 自定义金额 end */

.topUp > ul > li.isActive {
  background-color: #39486f;
}
.topUp > ul > li.isActive h3,
.topUp > ul > li.isActive p {
  color: #fff;
}
.selectRechargeTip {
  text-align: center;
}
.topUp .payEr {
  text-align: center;
  padding: 20px 0 30px 0;
}
.topUp .payEr > img {
  width: 150px;
  height: 150px;
}
.topUp .payEr > h3 {
  color: #f87a23;
  padding: 18px 0 8px 0;
}
.topUp .payEr > p {
  font-size: 12px;
  color: #999999;
}
</style>
<style scoped>
/* 问金转让 */
.makeOver {
  padding: 0 30px;
}
.makeOver .makeOverTitle {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999999;
  padding: 30px 0;
}
.makeOver .makeOverTitle > span {
}
.makeOver .myAskAround {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #efefef;
  padding: 20px 0;
  cursor: pointer;
}
.makeOver .myAskAround > img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-right: 15px;
}
.makeOver .myAskAround .myAskAround-title {
  color: #38476d;
  font-size: 18px;
}
.makeOver .myAskAround .myAskAround-title >>> .el-input__inner {
  padding: 0;
  font-size: 16px;
  height: 44px;
  line-height: 44px;
  border-radius: 22px;
  text-align: center;
}
.makeOver .myAskAround > div {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
}
.makeOver .myAskAround .myAskName > h3 {
  font-size: 20px;
  color: #333333;
}
.makeOver .myAskAround .myAskName > p {
  font-size: 12px;
  color: #999999;
  margin-top: 10px;
}
.makeOver .myAskAround > div > i {
  width: 12px;
  height: 12px;
  color: #999;
  transition: all 0.3s;
}
.makeOver .myAskAround > div > i.myAskArrow {
  transform: rotate(180deg);
}
.makeOver .myAskAround .myAskSelect {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 1;
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 2px 4px 16px 2px rgba(201, 201, 201, 0.5);
}
.makeOver .myAskAround .myAskSelect.myAskSelectS {
  display: block;
}
.makeOver .myAskAround .myAskSelect > p {
  font-size: 12px;
  color: #999999;
  margin-bottom: 25px;
}
.makeOver .myAskAround .myAskSelect > p > .el-button {
  border: 1px solid #39486f;
  color: #39486f;
  padding: 4px 10px;
}

.makeOver .myAskAround .myAskSelect > ul {
  max-height: 210px;
  overflow-y: auto;
}
.makeOver .myAskAround .myAskSelect > ul::-webkit-scrollbar {
  width: 0;
}
.makeOver .myAskAround .myAskSelect li {
  display: flex;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #efefef;
}
.makeOver .myAskAround .myAskSelect li > img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 15px;
}
.makeOver .myAskAround .myAskSelect li div {
  width: calc(100% - 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.makeOver .myAskAround .myAskSelect li h3 {
  font-size: 16px;
  color: #333333;
}
.makeOver .myAskAround .myAskSelect li p {
  font-size: 12px;
  color: #999;
}

::v-deep .makeOver .el-form {
  margin-top: 30px;
  margin-bottom: 60px;
}
::v-deep .makeOver .el-form .el-form-item__label {
  color: #666;
  font-size: 14px;
}
::v-deep .makeOver .el-form .el-form-item__content {
  color: #333;
  font-size: 14px;
}
::v-deep .makeOver .el-form .el-input__inner {
  height: 44px;
  line-height: 44px;
}
::v-deep .makeOver .el-form .el-input__suffix {
  line-height: 44px;
  right: 10px;
}
::v-deep .makeOver .el-form .el-input__suffix button {
  position: relative;
  background-color: #fff;
  color: #f87a23;
  border: 0;
  padding: 0 16px;
  margin-top: 16px;
  font-size: 14px;
}
::v-deep .makeOver .el-form .el-input__suffix::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 16px;
  display: block;
  width: 1px;
  height: 12px;
  background-color: #ecedf0;
}
::v-deep .makeOver .el-form .el-input__suffix button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  display: block;
  width: 1px;
  height: 12px;
  background-color: #ecedf0;
}
::v-deep .makeOver .subBtn {
  padding: 10px 30px;
}
::v-deep .makeOver .subBtn .el-button {
  border: 2px solid #d7d7d7;
  font-size: 14px;
  color: #666;
}
::v-deep .makeOver .subBtn .el-button.savaBtn {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}
::v-deep .makeOver .subBtn .el-button:hover,
::v-deep .makeOver .subBtn .el-button:focus {
  color: #f87a23;
  border-color: #f87a23;
  background-color: #fff;
}
::v-deep .makeOver .subBtn .el-button.savaBtn:hover,
::v-deep .makeOver .subBtn .el-button.savaBtn:focus {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  opacity: 0.9;
}
::v-deep .makeOver .subBtn .el-button.noVerifysavaBtn {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  cursor: not-allowed;
}

::v-deep .makeOver .subBtn .el-button.noVerifysavaBtn:hover,
::v-deep .makeOver .subBtn .el-button.noVerifysavaBtn:focus {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  opacity: 0.9;
}
.invite:hover,
.invite:focus {
  background-color: transparent;
}
::v-deep .joinIn .el-input .el-input__inner {
  width: 100%;
  height: 44px;
  line-height: 44px;
  border-radius: 22px;
  text-align: center;
}
::v-deep .joinIn .el-input .el-input__inner:focus {
  border-color: #f87a23;
}
.joinIn {
  position: relative;
}
.joinIn .joinBtn {
  width: 100%;
  /* background-color: #f87a23; */
  border-color: #f87a23;
  color: #f87a23;
  /* color: #fff; */
  padding: 14px 20px;
  margin-top: 15px;
}
.joinIn .joinBtn:hover {
  opacity: 0.9;
  background-color: #f87a23;
  color:#fff;
}

/* 邀请成员弹出框 */
.joinIn .myAskSelect {
  display: none;
  position: absolute;
  left: 0;
  top: 45%;
  z-index: 9;
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 2px 4px 16px 2px rgba(201, 201, 201, 0.5);
}
.joinIn .myAskSelect.joinInShow {
  display: block;
}
.joinIn .myAskSelect > p {
  font-size: 12px;
  color: #999999;
  margin-bottom: 25px;
}
.joinIn .myAskSelect > p > .el-button {
  border: 1px solid #39486f;
  color: #39486f;
  padding: 4px 10px;
}

.joinIn .myAskSelect > ul {
  max-height: 210px;
  overflow-y: auto;
}
.joinIn .myAskSelect > ul::-webkit-scrollbar {
  width: 0;
}
.joinIn .myAskSelect li {
  display: flex;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #efefef;
  cursor: pointer;
}
.joinIn .myAskSelect li > img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 15px;
}
.joinIn .myAskSelect li div {
  width: calc(100% - 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.joinIn .myAskSelect li h3 {
  font-size: 16px;
  color: #333333;
}
.joinIn .myAskSelect li p {
  font-size: 12px;
  color: #999;
}
</style>

<style lang="scss" scoped>
// 设置圈子logo
.setLogo{
  display: flex;
  align-items: center;
  img{
    width: 24px;
    height: 24px;
    border-radius: 5px;
  }
  h3{
    font-size: 16px;
    color: #2e3f5e;
    margin-left: 10px;
  }
  .setBtn{
    padding: 5px;
    font-size: 12px;
    color: #999;
    margin-left: 10px;
  }
}

// 无数据显示
  .noData{
    text-align: center;
    img{
      max-width: 300px;
    }
    .noData_txt{
      font-size: 14px;
      color: #333333;
      line-height: 26px;
      p{
        display: block;
      }
    }
    .noData_list{
      margin-top: 30px;
      padding-bottom: 30px;
      .noData_box{
        width: 48%;
        margin: 15px auto;
        border: 1px solid #ccc;
        font-size: 14px;
        color: #333333;
        line-height: 42px;
        border-radius: 44px;
        cursor: pointer;
      }
    }
  }

// ----------------------设置人事管理和超级查阅者----------------------
.menUnbind{
  display: flex;
  // flex-direction: column;
  // justify-content: space-between;
  width:100%;
  justify-content: space-between;
  margin-top: 5px;
  span{
    display: block;
    text-align: right;
    color: #999;
    font-size: 13px;
    cursor: pointer;
  }
  .roleSet{
    .el-checkbox{
      &:first-child{
        margin-right: 15px;
      }
    }
  }
}
// ----------------------设置人事管理和超级查阅者----------------------end
 .check_box{
    background-color: #38476d !important;
    color: #fff !important;
  }
</style>
